<!--
 * @Author: MarsLay 331412466@qq.com
 * @Date: 2024-01-15 09:50:16
 * @LastEditors: MarsLay 331412466@qq.com
 * @LastEditTime: 2024-01-15 17:58:47
 * @FilePath: \ticket-center\src\pages\index\Index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="container">
    <div class="login-box">
      <div class="station">当前站：轨道交通2号线 龙阳路</div>
      <div class="tab">
        <div @click="change(v, i)" class="single" :class="{ 'active': i == tab.idx }" v-for="(v, i) in tab.list" :key="i">
          <div class="single-inner" v-if="i == 0">
            <div class="bot"></div>
            <div class="txt">
              <div class="single-txt" :class="{ 'active': b == tab.cidx }" v-for="(a, b) in v.child" :key="b">{{ a.title
              }}
              </div>
            </div>
          </div>
          <div class="single-inner" v-else>
            <div class="bot"></div>
            <div class="txt" :class="{ 'active': i == tab.idx }">{{ v.title }}</div>
          </div>
        </div>
      </div>
      <router-view />
      <div class="status">
        <div class="tip">空闲</div>
        <div class="tip">SNC连接失败</div>
        <div class="tip">正常模式</div>
        <div class="tip">设备正常</div>
        <div class="tip">04333333</div>
        <div class="tip">B01</div>
        <div class="tip">{{ currentTime }}</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'toIndex',
  components: {},
  data() {
    return {
      currentTime: '',
      tab: {
        idx: 0,
        cidx: 0,
        list: [{
          child: [{
            title: 'BOM/',
            link: '/bom',
          }, {
            title: 'EFO[F3]',
            link: '/efo',
          }]
        }, {
          title: '出售[F4]',
          link: '/efo',
        }, {
          title: '分析[F5]',
          link: '/analysis'
        }]
      }
    }
  },
  watch: {},
  mounted() {
    if (['/bom', '/efo'].includes(this.$route.fullPath)) {
      this.tab.cidx = this.tab.list[0].child.findIndex(a => a.link == this.$route.fullPath);
      this.tab.idx = -1;
    } else {
      this.tab.idx = this.tab.list.findIndex(a => a.link == this.$route.fullPath);
      this.tab.cidx = -1;
    }
    this.updateTime(); // 初始化时先更新一次时间
    setInterval(this.updateTime, 1000); // 每秒更新一次时
  },
  methods: {
    change(v, i) {
      if (v.child) {
        this.tab.cidx = this.tab.cidx == 0 ? 1 : 0;
        this.tab.idx = -1;
        this.$router.push(v.child[this.tab.cidx].link);
      } else {
        this.tab.idx = i;
        this.tab.cidx = -1;
        this.$router.push(this.tab.list[this.tab.idx].link);
      }
    },
    updateTime() {
      const now = new Date();
      const hours = this.formatTime(now.getHours());
      const minutes = this.formatTime(now.getMinutes());
      const seconds = this.formatTime(now.getSeconds());
      this.currentTime = `${now.format("Y-m-d")} ${hours}:${minutes}:${seconds}`;
    },
    formatTime(time) {
      return time < 10 ? `0${time}` : time;
    },
  }
}
</script>

<style lang="less" scoped>
.container {
  .flex(row, center);
  position: relative;
  width: 100%;
  background-color: #ece9d8;
}

.tab {
  .flex(row, flex-start);
  margin: 10px auto;
  width: 80%;

  .single-inner {
    .flex(column, center);
    padding: 0 50px;
  }

  .active {
    .bot {

      box-shadow: none;
    }
  }

  .bot {
    margin-bottom: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ffe617;
    box-shadow: 2px 2px 5px 0 #000000;
  }

  .txt {
    .flex(row, flex-start);
    color: #666666;

    .single-txt.active,
    &.active {
      color: #ff0000;
    }
  }
}

.main {
  .flex(column, flex-start, center);
  margin: 0 auto;
  width: 80%;
  height: 75%;
  background: linear-gradient(to bottom, #ffffff, #aac8fe);
  border-top: 5px solid #999a97;
  border-bottom: 2px solid #bbd8ff;
  border-left: 5px solid #999a97;
  border-right: 5px solid #999a97;
  border-radius: 20px 20px 0 0;
}

.login-box {
  width: 80%;
  height: 98%;
  background-color: #ffffff;

  .station {
    margin: 20px auto 10px;
    font-size: 48px;
    color: #5703a9;
    text-align: center;
  }



  .status {
    .flex(row, flex-start);
    margin: 5px auto 0;
    width: 80%;
    height: 40px;
    background-color: #86bdf3;
    border: 5px solid #bbd8ff;

    .tip {
      .flex(row, center);
      height: 100%;

      &:not(:last-child) {
        border-right: 5px solid #bbd8ff;
      }

      &:nth-child(1),
      &:nth-child(6) {
        width: 10%;
      }

      &:nth-child(2) {
        width: 20%;
      }

      &:nth-child(3),
      &:nth-child(4),
      &:nth-child(5),
      &:nth-child(7) {
        width: 15%;
      }
    }
  }
}
</style>
